<template>
  <f7-page>
    <f7-navbar class="bg-color-transparent no-hairline" :title="`${title}${$t('m.rb1')}`" back-link=" "></f7-navbar>

    <div class="top-card">
      <h1>{{$store.getters.userInfo.shouyi || '0.0000'}}</h1>
      <p>{{title}}{{$t('m.rb2')}}</p>
    </div>

    <div class="content-padding">
      <ul>
        <li>
          <f7-link href="/link-red-envelope/?type=101">
            <img src="../static/shouyi-icon2.png" alt="">
            <p>{{$t('m.rb3')}}</p>
          </f7-link>
        </li>
        <li>
          <f7-link href="/link-red-envelope/?type=102">
            <img src="../static/shouyi-icon2.png" alt="">
            <p>{{$t('m.rb4')}}</p>
          </f7-link>
        </li>
        <li>
          <f7-link href="/link-red-envelope/?type=103">
            <img src="../static/shouyi-icon3.png" alt="">
            <p>{{$t('m.rb5')}}</p>
          </f7-link>
        </li>
        <!--<li>
          <f7-link href="/link-red-envelope/">
            <img src="../static/shouyi-icon4.png" alt="">
            <p>社区糖果奖励收入总量</p>
          </f7-link>
        </li>
        <li>
          <f7-link href="/link-red-envelope/">
            <img src="../static/shouyi-icon1.png" alt="">
            <p>社区津贴收入总量</p>
          </f7-link>
        </li>-->
      </ul>
    </div>
  </f7-page>
</template>

<script>
  export default {
    name: "revenue-breakdown",
    computed: {
      title() {
        return this.$f7route.query.type === '1'? 'ZOL': 'ZOL'
      }
    }
  }
</script>

<style scoped lang="scss">
  .top-card {
    background: url("../static/revenue-bg.png") no-repeat center top;
    background-size: cover;
    margin-top: -44PX;
    padding: 150px 0 50px;
    text-align: center;
    color: #fff;
    h1 {
      font-weight: bold;
      font-size: 70px;
      margin-bottom: $padding20;
    }
    p {
      font-size: 25px;
    }
  }
  .content-padding {
    margin-top: $padding;
    ul {
      li {
        background-color: #fff;
        padding: $padding20;
        margin-bottom: $padding;
        border-radius: $radius;
        box-shadow: 0 0 100px 0 rgba(0,0,0,.05);
        .link {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #737373;
        }
        img {
          width: 70px;
          margin-right: $padding20;
        }
      }
    }
  }
</style>
